<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>违章详情</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">-->
    <link rel="stylesheet" href="../../../resource/css/index.css">
    <!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
    <!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
    <!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
</head>
<body>
<div id="app">
<template>
<div>
  <div id="map" class="amap-demo"></div>
  <van-panel :title="list.area" :desc="list.act">
    <van-row class="info">
        <van-col span="8" v-text="list.carCode"></van-col>
        <van-col span="16" v-text="list.date" class="tar"></van-col>
    </van-row>
    <div slot="footer">
      <p class="panel">罚款<span class="blue">¥ <span v-text="list.money"></span></span><span class="ml10">扣分<span class="blue"><span v-text="list.fen"></span>分</span></span></p>
    </div>
  </van-panel>
  <!-- <div class="bt"><van-button size="large" type="info">立即处理</van-button></div> -->
</div>
</template>
</div>
<script src="../../../resource/js/vue.min.js"></script>
<script src="../../../resource/js/vant.min.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<script src="../../../resource/js/vue-router.js"></script>
<script src="../../../resource/js/axios.min.js"></script>
<script src="../../../resource/js/qs.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.14&key=ac7ce3c200e49a57980cc71f32c7c0b8"></script>
<script>
new Vue({
  el: '#app',
  data: {
    title: '违法详情',
    type: '4',
    list: {},
    mapkey: 'ac7ce3c200e49a57980cc71f32c7c0b8',
    map: null
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
    mag.toLogin(function(rs) {
        this.token = rs.token
        localStorage.setItem('token', rs.token)
        this.fetchData()
    })    
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
  },
  methods: {
    fetchData () {
      let that = this
      let archiveno = this.getRequest().archiveno
      let postparams = {
            token: localStorage.getItem('token')
          }
      axios.post('/Rule/getUserPeccancyInfo', postparams).then(({data}) => {
        if (data.code === 200) {
          let datas = data.data
          let carCode = data.car_code
          datas.forEach(res => {
            res.carCode = carCode
            if (res.archiveno === archiveno) {
              that.list = res
              let parameters = 'address=' + res.area + '&key=ac7ce3c200e49a57980cc71f32c7c0b8'
              axios.get('https://restapi.amap.com/v3/geocode/geo?' + parameters).then( mapdata => {
                let info = mapdata.data.geocodes[0]
                let lcenter = []
                lcenter = info.location.split(',')
                let map = new AMap.Map('map', {
                  center: lcenter,
                  zoom: 14,
                  resizeEnable: true
                })
                let marker = new AMap.Marker({
                    position: lcenter,
                })
                map.add(marker)
              })
            }
          })
        } else {
          that.list = ''
        }
      })
    },
    getRequest() {
      let url = window.location.search //获取url中"?"符后的字串
      let theRequest = new Object()
      if (url.indexOf("?") != -1) {
        let str = url.substr(1)
        strs = str.split("&")
        for(var i = 0; i < strs.length; i ++) {          
          theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1])          
        }
      }
      return theRequest
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bt{
  margin: 10px auto;
  text-align: center;
  padding: 0 15px;
}
.van-button--large{
  height: 38px;
  line-height: 36px;
}
.van-button--info{
  border-color: #4F91F2;
  background-color: #4F91F2
}
.tar{
  text-align: right;
}
.ml10{margin-left: 10px;}
.white{
  fill: #fff;
}
.blue {
  color: #4F91F2;
}
.panel {
  font-size: 14px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
.amap-demo {
  height: 300px;
}
.info{
  font-size: 12px;
  color: #898989;
  padding: 10px 15px;
}
</style>
</body>
</html>
